<template>
  <div>
    <el-table border :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))">
      <el-table-column prop="name" label="姓名" width="90" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="电话" width="250" align="center">
      </el-table-column>
      <el-table-column prop="posts" label="职称" width="200" align="center">
      </el-table-column>
      <el-table-column prop="time" label="加入时间" width="250" align="center">
      </el-table-column>
      <el-table-column prop="toExa" label="审核状态" align="center">
      </el-table-column>
      <el-table-column width="300" align="center">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            placeholder="输入医师姓名搜索"/>
        </template>
        <div slot-scope="scope">
          <el-button size="mini" icon="el-icon-search" @click="look(scope.row, scope.$index)">查看</el-button>
          <el-button size="mini" icon="el-icon-delete-solid" @click="del(scope.row, scope.$index)">删除</el-button>
        </div>
      </el-table-column>
    </el-table>
    <el-dialog  title="医生详情" :visible.sync="dialogFormVisible">
      <el-form :model="data">
        <el-form-item label="姓名" :label-width="data.formLabelWidth">
          <el-input v-model="data.name"></el-input>
        </el-form-item >
        <el-form-item label="电话" :label-width="data.formLabelWidth">
          <el-input v-model="data.phone"></el-input>
        </el-form-item>
        <el-form-item label="职称" :label-width="data.formLabelWidth">
          <el-input v-model="data.posts"></el-input>
        </el-form-item>
        <el-form-item label="加入时间" :label-width="data.formLabelWidth">
          <el-input v-model="data.time"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" :label-width="data.formLabelWidth">
          <el-input v-model="data.toExa"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'doctorList',
  data () {
    return {
      tableData: [
        {
          name: '张三',
          phone: '123412345',
          posts: '普通医师',
          time: '2021.12.02',
          toExa: '已通过'
        },
        {
          name: '张三',
          phone: '123456789',
          posts: '普通医师',
          time: '2021.12.02',
          toExa: '已通过'
        },
        {
          name: '张三',
          phone: '123456789',
          posts: '普通医师',
          time: '2021.12.02',
          toExa: '已通过'
        },
        {
          name: '张三',
          phone: '123456789',
          posts: '普通医师',
          time: '2021.12.02',
          toExa: '已通过'
        },
        {
          name: '张三',
          phone: '123456789',
          posts: '普通医师',
          time: '2021.12.02',
          toExa: '已通过'
        }
      ],
      data: {
        name: '',
        phone: '',
        posts: '',
        time: '',
        toExa: '',
        formLabelWidth: '100px'
      },
      search: '',
      dialogFormVisible: false
    }
  },
  methods: {
    del (row, index) {
      this.tableData.splice(index, 1)
    },
    look (row, index) {
      console.log(row)
      this.dialogFormVisible = true
      this.data.name = row.name
      this.data.phone = row.phone
      this.data.posts = row.posts
      this.data.time = row.time
      this.data.toExa = row.toExa
    }
  }
}
</script>

<style scoped>

</style>
